<template>
  <div class="safety-taskList">
    <van-tabs v-model="tableActive" @click="handleTabsChange">
      <van-tab title="任务基本信息">
        <div>
          <div class="pop-vertical-flex">
            <div class="pop-content">
              <expertListDetails />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="检查组">
        <div class="inspectionUnit">
          <div class="d-flex mt-2 w-100">
            <custom-radio-tag1 class="mb-1 w-100" :list="listRadio" :check-value="checkRadio" is-scroll @change="tagChange" />
          </div>
          <el-alert :title="title" type="warning" class="mb-1" :closable="false" />
          <!--  @click="openExpertListPopup(item)" -->
          <template v-if="listData && listData.length>0">
            <div v-for="(item, index) in listData" :key="index" class="list_item" @click="openCompanyList(item)">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    <span style="display: inline-block;width: 75%">{{ item.teamName }}（组长：{{ item.leaderName }}）</span>
                    <van-progress :percentage="item.zb" stroke-width="12" style="width: 3rem; display: block" />
                  </div>
                  <ul>
                    <li>
                      <i class="iconfont c-text-color5">&#xe790;</i>
                      <div class="label">检查企业数数量：</div>
                      <div class="value ">{{ item.num }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color6">&#xe725;</i>
                      <div class="label">已完成检查数量：</div>
                      <div class="value ">{{ item.ywc }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color6">&#xe60d;</i>
                      <div class="label">检查人员：</div>
                      <div class="value ">{{ item.expertName }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else />
        </div>
      </van-tab>
    </van-tabs>
    <van-popup
      v-model="companyListShow"
      get-container="body"
      position="right"
      :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      lock-scroll
      safe-area-inset-bottom
      close-on-popstate
      class="custom-van-pop"
    >
      <div class="pop-title">企业检查详情</div>
      <div class="pop-vertical-flex">
        <div class="pop-content" style="margin-top: 0;">
          <companyList v-if="companyListShow" ref="companyList" :check-team="checkCompany" />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import companyList from './companyList.vue'
import expertListDetails from './expertListDetails.vue'
import {
  planDangersCheckTaskDetails,
  appCheckTeamComplete,
  dangersCheckTaskDetailsByModuleName
} from '@/api/commonPage/dangerTreatment'
export default {
  components: {
    companyList,
    expertListDetails
  },
  inject: ['layout'],
  data() {
    return {
      tableActive: '任务基本信息',
      checkRadio: '',
      listRadio: [],
      listData: [],
      companyListShow: false,
      checkCompany: '',
      title: ''
    }
  },
  mounted() {
    this.$nextTick(() => {

    })
  },
  methods: {
    async planDangersCheckTaskDetails() {
      this.layout.showAreaLoading(['.inspectionUnit'])
      const { data, status } = await planDangersCheckTaskDetails({
        checkTaskId: this.$route.query.checkTaskId
      })
      if (status === 0 && data) {
        const listRadio = []
        data.checkContentList.forEach((x, index) => {
          if (!listRadio.find(val => val.label === x.moduleName)) {
            listRadio.push({
              label: x.moduleName,
              value: index
            })
          }
        })
        this.listRadio = listRadio
        this.checkRadio = this.listRadio[0].label
        await this.dangersCheckTaskDetailsByModuleName()
        await this.appCheckTeamComplete()
        this.layout.hideAreaLoading(['.inspectionUnit'])
      }
    },
    async appCheckTeamComplete() {
      this.listData = []
      const { status, data } = await appCheckTeamComplete({
        checkTaskId: this.$route.query.checkTaskId,
        moduleName: this.checkRadio === '环保节能' ? '环保' : this.checkRadio
      })
      if (status === 0 && data) {
        this.listData = data
      }
    },
    async dangersCheckTaskDetailsByModuleName() {
      const { status, data } = await dangersCheckTaskDetailsByModuleName({
        checkTaskId: this.$route.query.checkTaskId,
        moduleName: this.checkRadio === '环保节能' ? '环保' : this.checkRadio
      })
      if (status === 0 && data) {
        this.title = `截至目前，${data.dangersNumDesc}，${data.taskScheduleDesc}`
        console.log(data)
      }
    },
    handleTabsChange(name, title) {
      if (title === '检查组') {
        this.$nextTick(() => {
          this.planDangersCheckTaskDetails()
        })
      }
    },
    tagChange(item, index) {
      // console.log(this.listRadio)
      // console.log(item)
      // console.log(this.listRadio.filter(x => {
      //   return x.value === item.item.value
      // }))
      this.checkRadio = this.listRadio.filter(x => {
        return x.value === item.item.value
      })[0].label
      this.appCheckTeamComplete()
      this.dangersCheckTaskDetailsByModuleName()
    },
    openCompanyList(item) {
      // console.log(item)
      item.moduleName = this.checkRadio
      this.checkCompany = item
      // this.$refs['companyList'].formInline.checkTeamId = item.checkTeamId
      setTimeout(() => {
        this.companyListShow = true
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.safety-taskList .van-tabs__line{
  background-color: #3F81FF;
}
.custom-van-pop {
  background: url("~@/assets/images/wapper.png") no-repeat;
  overflow: hidden;
  .pop-title {
    color: #fff;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.46667rem;
    font-weight: bold;
    .icon-box{
      position: absolute;
      right:.5rem;
      top:0;
      .iconfont.active{
        color: blue;
      }
    }
  }
  .pop-content {
    // background-color: #fff;
    margin: 0 0.25rem ;
    padding: 0rem !important;
  }
  ::v-deep .van-popup__close-icon {
    color: #fff;
  }
}
</style>
